<template>
	<view class="apply">
		<nav-bar isBack backColor="#fff" title="填写资料" color="#fff" background="transparent" isPlace="false"></nav-bar>
		
		<!-- 顶部 -->
		<view class="a_top">
			<view class="a_tBg"><image src="https://manager.ryz1620.com/static/enter/bg_1.png"></image></view>
			<!-- 步骤 -->
			<view class="a_tStep">
				<view class="a_tsCan">
					<view class="a_tsLine">
						<view class="a_tsProgress" :class="pageStep == 1 ? 'half' : 'all'"></view>
					</view>
					<view class="a_tsList">
						<view class="a_tsItem" :class="{'active': pageStep >= 1}">
							<view class="a_tsNum">
								<view class="a_tsCircle1"></view>
								<view class="a_tsCircle2"></view>
								<view class="a_tsCircle3">1</view>
							</view>
							<view class="a_tsText">填写信息</view>
						</view>
						<view class="a_tsItem" :class="{'active': pageStep >= 2}">
							<view class="a_tsNum">
								<view class="a_tsCircle1"></view>
								<view class="a_tsCircle2"></view>
								<view class="a_tsCircle3">2</view>
							</view>
							<view class="a_tsText">附件上传</view>
						</view>
						<view class="a_tsItem" :class="{'active': pageStep >= 3}">
							<view class="a_tsNum">
								<view class="a_tsCircle1"></view>
								<view class="a_tsCircle2"></view>
								<view class="a_tsCircle3">3</view>
							</view>
							<view class="a_tsText">提交申请</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 内容 -->
		<view class="a_container">
			<swiper class="a_cSwiper" :current="pageStep - 1">
				<swiper-item class="a_cSwiper-item" @touchmove.stop.prevent="moveHandle">
					<scroll-view class="a_cScroll" scroll-y>
						<view class="a_cForm">
							<view class="a_cGroup">
								<view class="a_cItem">
									<view class="a_ciLabel">姓名</view>
									<view class="a_ciInput">
										<input type="text" v-model="form.userName" placeholder="请输入姓名" placeholder-class="col-c6">
									</view>
								</view>
								<view class="a_cItem">
									<view class="a_ciLabel">联系电话</view>
									<view class="a_ciInput">
										<input type="text" v-model="form.userPhone" disabled placeholder="请输入电话号码" placeholder-class="col-c6">
									</view>
								</view>
								<view class="a_cItem">
									<view class="a_ciLabel">邮箱</view>
									<view class="a_ciInput">
										<input type="text" v-model="form.userMail" placeholder="请输入邮箱" placeholder-class="col-c6">
									</view>
								</view>
								<view class="selectItem">
									<view class="title">入驻类型</view>
									<view class="select" @click="openSelectType">
										{{form.identity_type=='2'?'个人':'企业'}}
										<view class="iconfont icon-more"></view>
									</view>
								</view>
								<view class="selectItem">
									<view class="title">入驻卖场</view>
									<view class="select" @click="openSelectMarket">
										{{marketName?marketName:'请选择'}}
										<view class="iconfont icon-more"></view>
									</view>
								</view>
								<u-select v-model="showType" :list="listType" @confirm="confirmType"></u-select>
								<u-select v-model="showMarket" :list="marketList" @confirm="confirmMarket"></u-select>
							</view>
							<view class="a_cOper isFixed">
								<view class="a_cNext" @tap="nextStep">下一步</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="a_cSwiper-item" @touchmove.stop.prevent="moveHandle">
					<scroll-view class="a_cScroll" scroll-y>
						<view class="a_cForm">
							<view class="a_cGroup">
								<view class="a_cUpload">
									<view class="a_cuTitle">法人身份证</view>
									<view class="a_cuImages">
										<view class="a_cuLeft">
											<view class="a_cuImage" @tap="uploadImage('imageIdCardZ')">
												<image src="https://manager.ryz1620.com/static/enter/img_1.png"></image>
												<view class="a_cuUpload" v-if="form.imageIdCardZ"><image :src="form.imageIdCardZ"></image></view>
												<view class="a_cuPlay"><image src="https://manager.ryz1620.com/static/enter/icon_play.png"></image></view>
											</view>
											<view class="a_cuTxt">请上传身份证正面</view>
										</view>
										<view class="a_cuRight">
											<view class="a_cuImage" @tap="uploadImage('imageIdCardF')">
												<image src="https://manager.ryz1620.com/static/enter/img_2.png"></image>
												<view class="a_cuUpload" v-if="form.imageIdCardF"><image :src="form.imageIdCardF"></image></view>
												<view class="a_cuPlay"><image src="https://manager.ryz1620.com/static/enter/icon_play.png"></image></view>
											</view>
											<view class="a_cuTxt">请上传身份证反面</view>
										</view>
									</view>
								</view>
							</view>
							<view class="a_cGroup">
								<view class="a_cUpload">
									<view class="a_cuTitle">营业执照</view>
									<view class="a_cuBigImage" @tap="uploadImage('imageBusiness')">
										<image src="https://manager.ryz1620.com/static/enter/img_3.png"></image>
										<view class="a_cuUpload" v-if="form.imageBusiness"><image :src="form.imageBusiness"></image></view>
										<view class="a_cuPlay"><image src="https://manager.ryz1620.com/static/enter/icon_play.png"></image></view>
									</view>
								</view>
							</view>
							<view class="a_cOper">
								<view class="a_cPrev" @tap="prevStep">上一步</view>
								<view class="a_cSubmit" @tap="submitData">提交申请</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import navBar from "@/components/navBar/navBar.vue"
import service_enter from '@/service/enter.js'
import URL from '@/config/url.js'


export default {
	components: { navBar },
	
	data() {
		return {
			// 当前步骤
			pageStep: 1,   
			// 申请信息
			form: {
				userName: null,          // 用户姓名	
				userMail: null,          // 用户邮箱
				userPhone: null,         // 用户手机号
				imageIdCardZ: null,      // 法人身份证-正面
				imageIdCardZ_id: null,       
				imageIdCardF: null,      // 法人身份证-反面
				imageIdCardF_id: null,       
				imageBusiness: null,     // 营业执照
				imageBusiness_id: null,      
				identity_type:'1',//入驻类型 1-企业，2-个人 
				market_id:'',//入驻卖场
			},
			listType:[{
				label:'企业',
				value:'1'
			},{
				label:'个人',
				value:'2'
			}],
			showType:false,
			marketList:[],//卖场列表
			showMarket:false,
			marketName:'',
		}
	},
	
	onLoad() {
		this.form.userPhone = this.$store.state.index.userMobile
		this.getStoreData()
		this.getMarketList()
	},
	
	methods: {
		// 获取卖场列表
		getMarketList(){
			service_enter.getMarketList().then(res=>{
				console.log(res,'卖场列表')
				if(res.code==1){
					let arr = []
					res.data.map(item=>{
						arr.push({
							label:item.name,
							value:item.id
						})
					})
					this.marketList = arr
				}
			})
		},
		
		// 选择入驻类型
		openSelectType(){
			this.showType = true
		},
		// 选择确定
		confirmType(e){
			console.log(e,'type')
			this.form.identity_type = e[0].value
		},
		// 选择入驻卖场
		openSelectMarket(){
			this.showMarket = true
		},
		// 选择卖场确定
		confirmMarket(e){
			console.log(e,'market')
			this.form.market_id = e[0].value
			this.marketName = e[0].label
		},
		
		// 下一步
		nextStep() {
			if (this.verifyData(this.pageStep)) { // 验证数据
				this.pageStep++
				this.setStoreData()
			}
		},
		
		// 上一步
		prevStep() {
			this.pageStep--
			this.setStoreData()
		},
		
		// 提交申请数据
		submitData() {
			if (this.verifyData()) { // 验证数据
				let form = this.form
				let params = {
					name: form.userName,                  // 用户名称
					mail: form.userMail,                  // 用户邮箱
					mobile: form.userPhone,               // 用户手机号码
					id_card_top: form.imageIdCardZ_id,    // 法人身份证-正面
					id_card_back: form.imageIdCardF_id,   // 法人身份证-反面
					business_img: form.imageBusiness_id,  // 营业执照
					role: 'builder',     
					identity_type: form.identity_type,	  //入驻类型
					market_id: form.market_id,			  //入驻卖场
				}
				
				this.$utils.showLoading({ title: '提交中...' })
				service_enter.enter_apply(params)
					.then(res => {
						if (res.code == 1) {
							this.$store.commit("index/SET_isAnewApply", false)
							this.$store.commit("index/SET_isAnewSubmit", true)
							
							uni.redirectTo({ url: '/pages/enter/index/submit' })
						}
						else {
							this.$utils.hideLoading()
							this.$utils.showErr({ title: res.msg })
						}
					})
					.catch(err => {
						this.$utils.hideLoading()
						this.$utils.showErr()
					})
					
				// 保存数据
				this.setStoreData()
			}
		},
		
		// 验证数据
		verifyData(step = 'all') {		
			let form = this.form
			// 验证第一步数据
			if (step == 1 || step == 'all') {
				let userName = form.userName   // 用户名称
				let userMail = form.userMail   // 法人姓名 

				// 验证数据
				// 不用验证的数据：userPhone手机号码-首页通过授权获取
				if (!userName) { this.$utils.showErr({ title: '请输入用户姓名' }); return }
				if (userName.length > 10) { this.$utils.showErr({ title: '用户姓名不能超过10个字符' }); return }
				if (!(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(userMail))) { this.$utils.showErr({ title: '请输入正确的邮箱格式' }); return }
			}
			
			// 验证第二步数据
			if (step == 2 || step == 'all') {
				let imageIdCardZ = form.imageIdCardZ
				let imageIdCardF = form.imageIdCardF
				let imageBusiness = form.imageBusiness
								
				// 验证数据
				if (!imageIdCardZ) { this.$utils.showErr({ title: '请上传身份证正面' }); return }
				if (!imageIdCardF) { this.$utils.showErr({ title: '请上传身份证反面' }); return }
				if (!imageBusiness) { this.$utils.showErr({ title: '请上传营业执照' }); return }
			}
		
			// 验证通过
			return true
		},
		
		// 上传图片
		uploadImage(type) {
			// 选择图片
			uni.chooseImage({
				count: 1,
				success: (res) => {
					const tempFilePaths = res.tempFilePaths
					
					this.$utils.showLoading({ title: '上传中...' })
					// 上传图片
					uni.uploadFile({
						url: URL.ENTER_UPLOAD_IMAGE,
						filePath: tempFilePaths[0],
						name: 'file',
						success: (res) => {
							this.$utils.hideLoading()
							if (res.data) {
								let request = JSON.parse(res.data)
								if (request.code == 1) {
									// 上传成功提示
									uni.showToast({ title: '上传成功', icon: 'none' })
									
									// 上传的图片
									this.form[type] = request.data.url
									this.form[type + '_id'] = request.data.id
									this.setStoreData()
								}
								else {
									this.$utils.showErr({ title: request.msg })
								}
							}
							else {
								this.$utils.showErr()
							}
						},
						fail: (err) => {
							this.$utils.hideLoading()
							this.$utils.showErr()
						}
					})
				}
			})
		},
		
		// 从缓存中读取数据
		getStoreData() {
			let storeDate = uni.getStorageSync('enter_builder_data')
			if (storeDate) {
				this.form = storeDate
			}
		},
		
		// 缓存数据
		setStoreData() {
			uni.setStorage({
				key: 'enter_builder_data',
				data: this.form,
			})
		},
		
		// 禁止滑动
		moveHandle() {},
	}
}
</script>

<style lang="scss" scoped>
@import "@/pages/enter/style/apply.scss";
</style>